<template>
    <div class="page_warrpers">
      <happy-scroll  color="rgba(0,0,0,0.3)" size="5" resize>
  <!-- 你的内容 -->
  <div style="width:100%;height:100%;paddingRight:20px">
   <el-row :gutter="0">
  <el-col :span="6">
                      <el-cascader
    v-model="valueId"
    :options="optionsId"
    >
    </el-cascader>
  </el-col>
  <el-col :span="6">

                        <el-cascader
    v-model="isEnableValue"
    :options="isEnableOptions"
    >
    </el-cascader>
  </el-col>
  <el-col :span="7">
     <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
 
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
  </el-col>
</el-row>
        

  
  <el-table
    :data="tableData"
    stripe
    border
     v-loading="loading"
    >
    <el-table-column
     label="分类id"
   >
      <template slot-scope="scope">
          <div>
              {{scope.row.ROW_NUMBER.padStart(2,"0")}}
          </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="item_clsname"
      label="分类名称"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      label="分类介绍"
     >
    </el-table-column>
    <el-table-column
      prop="address"
      label="分类图标"
      >
    </el-table-column>
    <el-table-column
      prop="address"
      label="是否启用"
      >
      <template slot-scope="scope">
         <el-checkbox :checked="scope.row.display_flag=='1'?true:false"></el-checkbox>
      </template>
    </el-table-column>
    <el-table-column
      prop="item_order"
      label="排序"
      >
      <div slot="header">排序<i class="el-icon-d-caret"></i></div>
    </el-table-column>
 
    
       <el-table-column
      prop=""
      label="操作"
      >
       <template slot-scope="scope">
                <el-button type="primary" size="small" @click="ondelete(scope.row)">删除</el-button>

       </template>
    </el-table-column>
  </el-table>
  </div>
</happy-scroll>
               
    </div>
</template>
<script>
import { HappyScroll } from 'vue-happy-scroll'
  // 引入css，推荐将css放入main入口中引入一次即可。
  import 'vue-happy-scroll/docs/happy-scroll.css'
//自定义组件名
export default {
  components: {HappyScroll} ,
    data(){
        return{
          loading:true,
            tableData: [],
    valueId:1,
    isEnableValue:1,
    isEnableOptions:[{
           value: 1,
          label: '分类id',
    }],
    optionsId:[
        {
          value: 1,
          label: '启用',
        },
         {
          value: 2,
          label: '禁用',
        }],
        input:""
        }
    },
    created(){
      this.loading=true;
      this.getrule()
    },
    methods:{
      getrule(){
         this.$api.getlogin("/api/sort","")
          //  this.$http.post("log",{username:123456,password:123456})
            .then(res=>{
                if(res.data.code==200){
                  
                 this.tableData =res.data.data;
                 this.loading=false;
                };
                
            }).catch(error=>{

                console.log(error);
                
            })
      },
      // 删除每一行数据
      ondelete(item){
        console.log(item.ROW_NUMBER);
        let index=this.tableData.findIndex(x=>{
         return  x.ROW_NUMBER==item.ROW_NUMBER
        })
        if(index!==-1){
         this.tableData.splice(index,1);
        };
        
        
      }
    }
}
</script>
<style lang="less" scoped>
.page_warrpers{
  box-sizing: border-box;
    height:100%;
    .el-row{
        // margin-top: 20px;
        margin:0 0 20px 0!important;
        
    }
    .el-cascader-menu__wrap{
      overflow: auto!important;
    }
}


</style>


